<template>
  <li class="grm-label">
    <span>{{ word }}</span>
    <el-select :value="label" @change="setOutput" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        <span style="float: left">{{ item.label }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
      </el-option>
    </el-select>
  </li>
</template>
<script>
  import {mapState} from 'vuex'

  export default {
    props: ['word', 'index'],
    computed: {
      ...mapState(['tags', 'output']),
      options () {
        return this.tags.map(tag => ({
          label: tag,
          value: tag
        }))
      },
      label() {
        return this.output[this.index]
      }
    },
    methods: {
      setOutput (output) {
        this.$store.commit('setOutputByIndex', {
          index: this.index,
          output
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  li.grm-label {
    & > span {
      display: inline-block;
      width: 100px;
    }
    .el-select {
      width: 400px;
    }
  }
</style>
